<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="../favicon.ico">
        <script src="js/jquery.min.js"></script>
        <title>jsPlumb Community Edition Documentation</title>
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">




        <link rel="stylesheet" href="css/docs.css">
        <script src="js/docs.js"></script>
    </head>

    <body class="jtk-bootstrap-wide">

        <div class="jtk-header">
    <a class="jtk-logo" href="/"><img src="logo-medium-jsplumb.png"></a>

</div>


        <div class="padding-top" style="margin-top:20px;display:flex;">

                <div id="docs-nav" tabindex="0">
                    <ul>
<li>Imports and Setup

<ul>
<li><a href="home.html#browser">Browser Compatibility</a></li>
<li><a href="home.html#setup">Setup</a></li>
<li><a href="home.html#doctype">Doctype</a></li>
<li><a href="home.html#imports">Required Imports</a></li>
<li><a href="home.html#initializing">Initializing jsPlumb</a></li>
<li><a href="home.html#multiple">Multiple jsPlumb Instances</a></li>
<li><a href="home.html#zindex">Z-Index Considerations</a></li>
<li><a href="home.html#container">Where does jsPlumb add elements?</a></li>
<li><a href="home.html#performance">Performance</a></li>
<li><a href="zooming.html">Zooming</a></li>
<li><a href="defaults.html">Configuring Defaults</a></li>
</ul></li>
<li>Concepts

<ul>
<li><a href="basic-concepts.html">Introduction</a></li>
<li><a href="anchors.html">Anchors</a></li>
<li><a href="connectors.html">Connectors</a></li>
<li><a href="endpoints.html">Endpoints</a></li>
<li><a href="overlays.html">Overlays</a></li>
<li><a href="groups.html">Groups</a></li>
<li><a href="lists.html">Scrollable Lists</a></li>
</ul></li>
<li>Nodes

<ul>
<li><a href="dragging.html">Element Dragging</a></li>
</ul></li>
<li>Connections

<ul>
<li><a href="connections.html">Overview</a></li>
<li><a href="connections.html#programmatic">Programmatic Connections</a></li>
<li><a href="connections.html#common">Reusing Common Settings</a></li>
<li><a href="connections.html#detaching">Detaching Programmatic Connections</a></li>
<li><a href="connections.html#draganddrop">Drag and Drop Connections</a></li>
<li><a href="connections.html#sourcesandtargets">Elements as sources &amp; targets</a></li>
<li><a href="connections.html#maketarget">Element Targets</a></li>
<li><a href="connections.html#makesource">Element Sources</a></li>
<li><a href="connections.html#sourcefilter">Specifying drag source area</a></li>
<li><a href="removing.html">Removing Connections/Endpoints</a></li>
<li><a href="parameters.html">Connection &amp; Endpoint Parameters</a></li>
</ul></li>
<li>Connection &amp; Endpoint Types

<ul>
<li><a href="types.html">Introduction</a></li>
<li><a href="types.html#connection-type">Connection Types</a></li>
<li><a href="types.html#endpoint-type">Endpoint Types</a></li>
</ul></li>
<li>Events

<ul>
<li><a href="events.html">Overview</a></li>
<li><a href="interceptors.html">Interceptors</a></li>
</ul></li>
<li>Appearance

<ul>
<li><a href="paint-styles.html">Styling via Paint Styles</a></li>
<li><a href="styling-via-css.html">Styling via CSS</a></li>
</ul></li>
<li>Querying jsPlumb

<ul>
<li><a href="querying.html#select">Selecting a list of Connections</a></li>
<li><a href="querying.html#selectEndpoints">Selecting a list of Endpoints</a></li>
</ul></li>
<li>Miscellaneous

<ul>
<li><a href="animation.html">Animation</a></li>
<li><a href="utilities.html">Utility Functions</a></li>
</ul></li>
<li>Bundling jsPlumb

<ul>
<li><a href="webpack.html">Webpack</a></li>
</ul></li>
<li>Examples

<ul>
<li><a href="connect-examples.html">jsPlumb.connect</a></li>
<li><a href="draggable-connections-examples.html">Draggable Connections</a></li>
<li><a href="miscellaneous-examples.html">Miscellaneous</a></li>
</ul></li>
<li>Development

<ul>
<li><a href="changelog.html">Changelog</a></li>
<li><a href="development.html">Which files are which?</a></li>
<li><a href="Build.html">Building jsPlumb</a></li>
<li><a href="development-documentation.html">Documentation while developing</a></li>
</ul></li>
</ul>


                </div>

            <div id="docs">
                
                <div class="markdown-body">
                    <h2>Querying jsPlumb</h2>

<ul>
<li><strong>Connections</strong>

<ul>
<li><a href="#select">Selecting and operating on a list of Connections</a></li>
<li><a href="#selectSetters">Setter operations</a></li>
<li><a href="#selectGetters">Getter operations</a></li>
<li><a href="#selectExamples">Examples</a></li>
<li><a href="#selectIterate">Iterating through results</a></li>
<li><a href="#selectOther">Other properties/functions</a></li>
<li><a href="#getConnections">Retrieving static Connection lists</a></li>
<li><a href="#getConnectionsSingleScope">Retrieving connections for a single scope</a></li>
<li><a href="#getConnectionsAdvanced">Filtering by source, target and/or scope</a></li>
<li><a href="#getConnectionsExamples">Examples</a></li>
</ul></li>
<li><strong>Endpoints</strong>

<ul>
<li><a href="#selectEndpoints">Selecting and operating on a list of Endpoints</a></li>
<li><a href="#selectEndpointsSetters">Setter Methods</a></li>
<li><a href="#selectEndpointsGetters">Getter Methods</a></li>
<li><a href="#selectEndpointsOther">Other Methods/Properties</a></li>
<li><a href="#selectEndpointsExamples">Examples</a></li>
</ul></li>
</ul>

<h3>Connections</h3>

<p><a name="select"></a></p>

<h4>Selecting and operating on a list of Connections</h4>

<p>The <code>jsPlumb.select</code> function provides a fluid interface for working with lists of Connections.  The syntax used to 
specify which Connections you want is identical to that which you use for <code>getConnections</code>, but the return value is an 
object that supports most operations that you can perform on a Connection, and which is also chainable, for setter methods. 
Certain getter methods are also supported, but these are not chainable; they return an array consisting of all the 
Connections in the selection along with the return value for that Connection.</p>

<p><a name="selectSetters"></a></p>

<h5>Setter Operations</h5>

<p>This is the full list of setter operations supported by jsPlumb.select:</p>

<ul>
<li>addClass</li>
<li>removeClass</li>
<li>addOverlay</li>
<li>removeOverlay</li>
<li>removeOverlays</li>
<li>showOverlay</li>
<li>hideOverlay</li>
<li>showOverlays</li>
<li>hideOverlays</li>
<li>removeAllOverlays</li>
<li>setLabel</li>
<li>setPaintStyle</li>
<li>setHoverPaintStyle</li>
<li>setDetachable</li>
<li>setReattach</li>
<li>setConnector</li>
<li>setParameter</li>
<li>setParameters</li>
<li>detach</li>
<li>repaint</li>
<li>setType</li>
<li>addType</li>
<li>removeType</li>
<li>toggleType</li>
<li>setVisible</li>
</ul>

<p>Each of these operations returns a selector that can be chained.</p>

<p><a name="selectGetters"></a></p>

<h5>Getter Operations</h5>

<p>This is the full list of getter operations supported by <code>jsPlumb.select</code>:</p>

<ul>
<li>getLabel</li>
<li>getOverlay</li>
<li>isHover</li>
<li>isVisible</li>
<li>isDetachable</li>
<li>isReattach</li>
<li>getParameter</li>
<li>getParameters</li>
<li>getType<br></li>
<li>hasType</li>
</ul>

<p>Each of these operations returns an array whose entries are [ value, Connection ] arrays, where <code>value</code> is the return value from the given Connection.  Remember that the return values from a getter are not chainable, but a getter may be called at the end of a chain of setters.</p>

<p><a name="selectExamples"></a></p>

<h5>Examples</h5>

<ul>
<li>Select all Connections and set their hover state to be false:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">().</span><span class="nx">setHover</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</code></pre></div>
<ul>
<li>Select all Connections from &quot;d1&quot; and remove all Overlays:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">removeAllOverlays</span><span class="p">();</span>
</code></pre></div>
<ul>
<li>Select all connections in scope &quot;foo&quot; and set their paint style to be a thick blue line:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">}).</span><span class="nx">setPaintStyle</span><span class="p">({</span>
        <span class="nx">stroke</span><span class="o">:</span><span class="s2">&quot;blue&quot;</span><span class="p">,</span> 
        <span class="nx">strokeWidth</span><span class="o">:</span><span class="mi">5</span> 
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Select all Connections from &quot;d1&quot; and detach them:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">detach</span><span class="p">();</span>
</code></pre></div>
<ul>
<li>Select all Connections and add the classes &quot;foo&quot; and &quot;bar&quot; to them :</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;foo bar&quot;</span><span class="p">);</span>
</code></pre></div>
<ul>
<li>Select all Connections and remove the class &quot;foo&quot; from them :</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;foo&quot;</span><span class="p">);</span>
</code></pre></div>
<p><a name="selectIterate"></a></p>

<h5>Iterating through results</h5>

<p>The return value of <code>jsPlumb.select</code> has a <code>.each</code> function that allows you to iterate through the list, performing an operation on each one:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">}).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// do something </span>
<span class="p">});</span>
</code></pre></div>
<p><code>.each</code> is itself chainable:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">select</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">}).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>   
        <span class="c1">// do something </span>
<span class="p">}).</span><span class="nx">setHover</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</code></pre></div>
<p><a name="selectOther"></a></p>

<h5>Other properties/functions</h5>

<ul>
<li><strong>length</strong> - this member reports the number of Connections in the selection</li>
<li><strong>get(idx)</strong> - this function allows you to retrieve a Connection from the selection</li>
</ul>

<p><a name="getConnections"></a></p>

<h4>Retrieving static Connection lists</h4>

<p>As well as the <code>select</code> method, jsPlumb has another method that can be used to retrieve static lists of Connections - <code>getConnections</code>. The return value of this method is not chainable and does not offer operations on the Connections in the way that the return value of <code>select</code> does.</p>

<p><a name="getConnectionsSingleScope"></a></p>

<h5>Retrieving connections for a single scope</h5>

<p>To do this, you call <code>getConnections</code> with either no arguments, in which case jsPlumb uses the default scope, or with a string specifying one scope</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">connectionList</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">();</span> <span class="c1">// you get a list of Connection objects that are in the default scope.</span>
</code></pre></div>
<p>Compare this with:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">connectionList</span> <span class="o">=</span> <span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">(</span><span class="s2">&quot;myScope&quot;</span><span class="p">);</span>     <span class="c1">// you get a list of Connection objects that are in &quot;myScope&quot;.</span>
</code></pre></div>
<p><a name="getConnectionsAdvanced"></a></p>

<h5>Filtering by source, target and/or scope</h5>

<p><code>getConnections</code> optionally takes a JS object specifying filter parameters, of which there are three:</p>

<ul>
<li><strong>scope</strong> - the scope(s) of the connection type(s) you wish to retrieve</li>
<li><strong>source</strong> - limits the returned connections to those that have this source id</li>
<li><strong>target</strong> - limits the returned connections to those that have this target id</li>
</ul>

<p>Each of these three parameters may be supplied as a string, which for source and target is an element id and for scope is the name of the scope, or a list of strings.  Also, you can pass &quot;*&quot; in as the value for any of these - a wildcard, meaning any value.  See the examples below.</p>

<p><strong>Important:</strong> The return value of a call to <code>getConnection</code> using a JS object as parameter varies on how many scopes you defined.  If you defined only a single scope then jsPlumb returns you a list of Connections in that scope.  Otherwise the return value is a dictionary whose keys are  scope names, and whose values are lists of Connections. For example, the following call:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
  <span class="nx">scope</span><span class="o">:</span><span class="p">[</span><span class="s2">&quot;someScope&quot;</span><span class="p">,</span> <span class="s2">&quot;someCustomScope&quot;</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<p>would result in this output:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
  <span class="s2">&quot;someScope&quot;</span> <span class="o">:</span> <span class="p">[</span> <span class="mi">1</span><span class="p">..</span><span class="nx">n</span> <span class="nx">Connections</span> <span class="p">],</span>
  <span class="s2">&quot;someCustomScope&quot;</span><span class="o">:</span> <span class="p">[</span> <span class="mi">1</span><span class="p">..</span><span class="nx">m</span> <span class="nx">Connections</span> <span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<p>This has tripped up many a developer who has been reluctant to take the time to read the documentation.  </p>

<p>There is an optional second parameter that tells getConnections to flatten its output and just return you an array.  The previous example with this parameter would look like this:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
  <span class="nx">scope</span><span class="o">:</span><span class="p">[</span><span class="s2">&quot;someScope&quot;</span><span class="p">,</span> <span class="s2">&quot;someCustomScope&quot;</span><span class="p">]</span>
<span class="p">},</span> <span class="kc">true</span><span class="p">);</span>
</code></pre></div>
<p>...and would result in this output:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">[ 1..n Connections ]
</code></pre></div>
<p><a name="getConnectionsExamples"></a>
The following examples show the various ways you can get connection information:</p>

<ul>
<li>Get all connections:<br></li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getAllConnections</span><span class="p">();</span>
</code></pre></div>
<ul>
<li>Get all connections for the default scope only(return value is a list):</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">();</span>
</code></pre></div>
<ul>
<li>Get all connections for the given scope (return value is a list): </li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;myTestScope&quot;</span><span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given scopes (return value is a list if only connections for the default scope exist, otherwise its a map of scope names to connection lists):<br></li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
    <span class="nx">scope</span><span class="o">:</span><span class="p">[</span><span class="s2">&quot;myTestScope&quot;</span><span class="p">,</span> <span class="s2">&quot;yourTestScope&quot;</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given source (return value is a list if only connections for the default scope exist, otherwise its a map of scope names to connection lists):</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
    <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;mySourceElement&quot;</span>
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given sources (return value is a list if only connections for the default scope exist, otherwise its a map of scope names to connection lists):<br></li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
    <span class="nx">source</span><span class="o">:</span><span class="p">[</span><span class="s2">&quot;mySourceElement&quot;</span><span class="p">,</span> <span class="s2">&quot;yourSourceElement&quot;</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given target (return value is a list if only connections for the default scope exist, otherwise its a map of scope names to connection lists):</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
    <span class="nx">target</span><span class="o">:</span><span class="s2">&quot;myTargetElement&quot;</span>
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given source and targets (return value is a list if only connections for the default scope exist, otherwise its a map of scope names to connection lists):</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
        <span class="nx">source</span><span class="o">:</span><span class="s2">&quot;mySourceElement&quot;</span><span class="p">,</span> 
        <span class="nx">target</span><span class="o">:</span><span class="p">[</span><span class="s2">&quot;target1&quot;</span><span class="p">,</span> <span class="s2">&quot;target2&quot;</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<ul>
<li>Get all connections for the given scope, with the given source and target (return value is a list of connections):</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">getConnections</span><span class="p">({</span>
        <span class="nx">scope</span><span class="o">:</span><span class="err">&#39;</span><span class="nx">myScope</span><span class="s2">&quot;, </span>
<span class="s2">        source:&quot;</span><span class="nx">mySourceElement</span><span class="s2">&quot;, </span>
<span class="s2">        target:&quot;</span><span class="nx">myTargetElement</span><span class="err">&quot;</span>
<span class="p">});</span>
</code></pre></div>
<p><a name="selectEndpoints"></a></p>

<h3>Selecting and operating on a list of Endpoints</h3>

<p><code>jsPlumb.selectEndpoints</code> provides a fluid interface for working with lists of Endpoints.</p>

<p>The syntax used to specify which Endpoints you want is identical to that which you use for <code>jsPlumb.select</code>, and the return value is an object that supports most operations that you can perform on an Endpoint (and which is also chainable, for setter methods). Certain getter methods are also supported, but these are not chainable; they return an array consisting of all the Endpoints in the selection along with the return value for that Endpoint.    </p>

<p>Four parameters are supported by selectEndpoints - each of these except <code>scope</code> can be provided as either a string, a selector, a DOM element, or an array of a mixture of these types.  <code>scope</code> can be provided as either a string or an array of strings:        </p>

<ul>
<li><strong>element</strong> - element(s) to get both source and target endpoints from</li>
<li><strong>source</strong> - element(s) to get source endpoints from</li>
<li><strong>target</strong> - element(s) to get target endpoints from</li>
<li><strong>scope</strong> - scope(s) for endpoints to retrieve</li>
</ul>

<p><a name="selectEndpointsSetters"></a></p>

<h4>Setter Operations</h4>

<p>This is the full list of setter operations supported by <code>jsPlumb.selectEndpoints</code>: </p>

<ul>
<li>addClass<br></li>
<li>removeClass</li>
<li>addOverlay</li>
<li>removeOverlay</li>
<li>removeOverlays</li>
<li>showOverlay</li>
<li>hideOverlay</li>
<li>showOverlays</li>
<li>hideOverlays</li>
<li>removeAllOverlays</li>
<li>setLabel</li>
<li>setPaintStyle</li>
<li>setHoverPaintStyle</li>
<li>setConnector</li>
<li>setParameter</li>
<li>setParameters</li>
<li>repaint</li>
<li>setType</li>
<li>addType</li>
<li>removeType</li>
<li>toggleType</li>
<li>setVisible</li>
<li>setAnchor</li>
</ul>

<p>Each of these operations returns a selector that can be chained.</p>

<p><a name="selectEndpointsGetters"></a></p>

<h4>Getter Operations</h4>

<p>This is the full list of getter operations supported by <code>jsPlumb.selectEndpoints</code>:     </p>

<ul>
<li>getLabel</li>
<li>getOverlay</li>
<li>isHover</li>
<li>isVisible<br></li>
<li>getParameter</li>
<li>getParameters</li>
<li>getType</li>
<li>hasType<br></li>
<li>getAnchor</li>
</ul>

<p>Each of these operations returns an array whose entries are <code>[ value, Endpoint ]</code> arrays, where &#39;value&#39; is the return value from the given Endpoint. Remember that the return values from a getter are not chainable, but a getter may be called at the end of a chain of setters.</p>

<p><a name="selectEndpointsOther"></a></p>

<h4>Other methods/properties (not chainable):</h4>

<ul>
<li><strong>delete</strong> - deletes the Endpoints in the selection</li>
<li><strong>detachAll</strong> - detaches all Connections from the Endpoints in the selection<br></li>
<li><strong>length</strong> - this member reports the number of Endpoints in the selection</li>
<li><strong>get(idx)</strong> - this function allows you to retrieve an Endpoint from the selection</li>
</ul>

<p><a name="selectEndpointsExamples"></a></p>

<h4>Examples</h4>

<ul>
<li>Select all Endpoints and set their hover state to be false:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">().</span><span class="nx">setHover</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</code></pre></div>
<ul>
<li>Select all source Endpoints on &quot;d1&quot; and remove all Overlays:</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">removeAllOverlays</span><span class="p">();</span>
</code></pre></div>
<ul>
<li>Select all source Endpoints on &quot;d1&quot; and add the classes &quot;foo&quot; and &quot;bar&quot; to them :</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;foo bar&quot;</span><span class="p">);</span>
</code></pre></div>
<ul>
<li>Select all source Endpoints on &quot;d1&quot; and remove the class &quot;foo&quot; from them :</li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;foo&quot;</span><span class="p">);</span>
</code></pre></div>
<ul>
<li><p>Select all Endpoints in scope &quot;foo&quot; and set their fill style to be blue:
<code>javascript
jsPlumb.selectEndpoints({ scope:&quot;foo&quot; }).setPaintStyle({ fill:&quot;blue&quot; });
</code></p></li>
<li><p>Select all Endpoints from &quot;d1&quot; and detach their Connections:</p></li>
</ul>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">source</span><span class="o">:</span><span class="s2">&quot;d1&quot;</span><span class="p">}).</span><span class="nx">detachAll</span><span class="p">();</span>
</code></pre></div>
<h5><code>.each</code> iterator</h5>

<p>The return value of jsPlumb.selectEndpoints also has a <code>.each</code> function that allows you to iterate through the list, performing an operation on each one:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">}).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">endpoint</span><span class="p">)</span> <span class="p">{</span>

        <span class="c1">// do something </span>
<span class="p">});</span>
</code></pre></div>
<p><code>.each</code> is itself chainable:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">selectEndpoints</span><span class="p">({</span><span class="nx">scope</span><span class="o">:</span><span class="s2">&quot;foo&quot;</span><span class="p">}).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">endpoint</span><span class="p">)</span> <span class="p">{</span>

        <span class="c1">// do something </span>

<span class="p">}).</span><span class="nx">setHover</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</code></pre></div>
                </div>
            </div>
        </div>

        <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>


    </body>

</html>
